import { getRankListApi } from '@/api/request';
import { reactive } from 'vue';
import ProImage from '../../components/ProImage';
import './rank.scss';



const Rank = ({
    setup(){
        const state = reactive({
            offcalRankList: [],
            gloabRankList: [],
        })
        const handleSlice = (list) => {
            const index = list.findIndex(item => item.name === '热歌榜')
            const offcalRankList = list.slice(0,index);
            const gloabRankList = list.slice(index + 1, list.length - 1);
            Object.assign(state, {
                offcalRankList,
                gloabRankList
            })
        };
        const initPage = () => {
            getRankListApi().then(res => {
                res.code === 200 && handleSlice(res.list)
            })
        };
        initPage();
        // 渲染官方榜
        const renderOffcalRank = () => (
            <ul>
                {
                    state.offcalRankList.map(item => (
                        <li className="offcalItem" key={item.id}>
                            <div className="imgWrapper">
                              <ProImage src={item.coverImgUrl} />
                            </div>
                            <div className="textWrapper">
                               {
                                   item.tracks.map((item,index) => (
                                       <div key={index}>
                                           {index + 1}. {item.first} - {item.second}
                                       </div>
                                   ))
                               }
                            </div>
                        </li>
                    ))
                }
            </ul>
        )
        const renderGloalRank = () => (
            <ul className="gloalRankBox">
               {
                    state.gloabRankList.map(item => (
                        <li className="rankItem" key={item.id}>
                            <ProImage src={item.coverImgUrl} />
                        </li>
                    ))
               }
            </ul>
        );
        return () => (
            <div className="rankPage">
                <h2 className="offcal">
                    官方榜
                </h2>
                {
                    renderOffcalRank()
                }
                <h2 className="offcal global">
                    全球榜
                </h2>
                {
                    renderGloalRank()
                }
            </div>
        )
    }
})
export default Rank;